<script lang="ts" setup>
import type { ColumnsType } from 'ant-design-vue/es/table'

const columns: ColumnsType = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
    align: 'center',
  },
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name',
    align: 'center',
  },
  
  {
    title: 'ip地址',
    dataIndex: 'domain',
    key: 'domain',
    align: 'center',
  },
  {
    title: '端口',
    dataIndex: 'port',
    key: 'port',
    align: 'center',
  },
  {
    title: '协议',
    dataIndex: 'protocol',
    key: 'protocol',
    align: 'center',
  },
  {
    title: '描述',
    dataIndex: 'description',
    key: 'description',
    align: 'center',
  },
  {
    title: '操作',
    dataIndex: 'operator',
    key: 'operator',
    align: 'center',
  },
]
const { fetchGetProxyDatas } = useGlobalConfigStore()
const { config, loadingWithGetProxyDatas } = storeToRefs(
  useGlobalConfigStore(),
)
</script>

<template>
  <SimplyTableModal
    v-model:data-source="config.proxyListDataProxy"
    base-name="proxy"
    localize-name="代理"
    :columns="columns"
    :loading-with-get-data-source="loadingWithGetProxyDatas"
    :custom-fields="['id']"
    @refresh-data="fetchGetProxyDatas"
  />
</template>
